<template>
    <h-section title="数据权限" collapse>
        <template #titleExtra>
            <span class="caption-font-color margin-l-8" style="font-size: 14px"> 提示：在此处配置用户对于系统的数据权限 </span>
        </template>
        <a-form layout="vertical">
            <a-row :gutter="24">
                <a-col :span="7">
                    <a-form-item label="产品负责人">
                        <div v-if="disabled">
                            <flexbox wrap="wrap">
                                <div class="h-tag-item" v-for="item of pmpSystemManagers['产品经理']" :key="item.id">
                                    {{ item.empName }}
                                </div>
                            </flexbox>
                        </div>
                    </a-form-item>
                </a-col>
                <a-col :span="7">
                    <a-form-item label="研发经理">
                        <div v-if="disabled">
                            <flexbox wrap="wrap">
                                <div class="h-tag-item" v-for="item of pmpSystemManagers['研发经理']" :key="item.id">
                                    {{ item.empName }}
                                </div>
                            </flexbox>
                        </div>
                    </a-form-item>
                </a-col>
                <a-col :span="7">
                    <a-form-item label="需求管理员">
                        <div v-if="disabled">
                            <flexbox wrap="wrap">
                                <div class="h-tag-item" size="small" v-for="item of pmpSystemManagers['需求管理员']" :key="item.id">
                                    {{ item.empName }}
                                </div>
                            </flexbox>
                        </div>
                    </a-form-item>
                </a-col>
                <a-col :span="7">
                    <a-form-item label="测试经理">
                        <div v-if="disabled">
                            <flexbox wrap="wrap">
                                <div class="h-tag-item" v-for="item of pmpSystemManagers['测试经理']" :key="item.id">
                                    {{ item.empName }}
                                </div>
                            </flexbox>
                        </div>
                    </a-form-item>
                </a-col>
                <a-col :span="7">
                    <a-form-item label="观察者">
                        <div v-if="disabled">
                            <flexbox wrap="wrap">
                                <div class="h-tag-item" v-for="item of pmpSystemManagers['观察者']" :key="item.id">
                                    {{ item.empName }}
                                </div>
                            </flexbox>
                        </div>
                    </a-form-item>
                </a-col>
                <a-col :span="7">
                    <a-form-item label="研发人员">
                        <div v-if="disabled">
                            <flexbox wrap="wrap">
                                <div class="h-tag-item" v-for="item of pmpSystemManagers['研发人员']" :key="item.id">
                                    {{ item.empName }}
                                </div>
                            </flexbox>
                        </div>
                    </a-form-item>
                </a-col>
                <a-col :span="7">
                    <a-form-item label="UI人员">
                        <div v-if="disabled">
                            <flexbox wrap="wrap">
                                <div class="h-tag-item" v-for="item of pmpSystemManagers['UI人员']" :key="item.id">
                                    {{ item.empName }}
                                </div>
                            </flexbox>
                        </div>
                    </a-form-item>
                </a-col>
                <a-col :span="7">
                    <a-form-item label="运维人员">
                        <div v-if="disabled">
                            <flexbox wrap="wrap">
                                <div class="h-tag-item" v-for="item of pmpSystemManagers['运维人员']" :key="item.id">
                                    {{ item.empName }}
                                </div>
                            </flexbox>
                        </div>
                    </a-form-item>
                </a-col>
                <a-col :span="7">
                    <a-form-item label="测试人员">
                        <div v-if="disabled">
                            <flexbox wrap="wrap">
                                <div class="h-tag-item" v-for="item of pmpSystemManagers['测试人员']" :key="item.id">
                                    {{ item.empName }}
                                </div>
                            </flexbox>
                        </div>
                    </a-form-item>
                </a-col>
                <a-col :span="7">
                    <a-form-item label="产品人员">
                        <div v-if="disabled">
                            <flexbox wrap="wrap">
                                <div class="h-tag-item" v-for="item of pmpSystemManagers['产品人员']" :key="item.id">
                                    {{ item.empName }}
                                </div>
                            </flexbox>
                        </div>
                    </a-form-item>
                </a-col>
            </a-row>
        </a-form>
    </h-section>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue';
export default defineComponent({
    props: {
        detail: {
            type: Object,
            default: () => ({})
        },
        disabled: {
            type: Boolean,
            default: false
        }
    },
    setup(props) {
        const pmpSystemManagers = ref<any>({
            产品经理: [],
            研发经理: [],
            需求管理员: [],
            测试经理: [],
            观察者: []
        });
        const init = () => {
            const keys = Object.keys(props.detail.pmpSystemManagers);
            if (keys.length) {
                keys.forEach((key) => {
                    pmpSystemManagers.value[key] = props.detail.pmpSystemManagers[key];
                });
            }
        };
        init();
        return {
            pmpSystemManagers
        };
    }
});
</script>
<style scoped lang="less">
.ant-btn {
    margin-right: 2px;
    margin-bottom: 2px;
}
</style>